<template>
  <el-dialog
    :title="title"
    :visible.sync="isShow"
    @open="openCallback"
    @close="closeCallback"
    width="40%">
    <el-form @submit.native.prevent
             size="small"
             :model="form"
             ref="form"
             label-width="100px"
             label-position="right"
             :rules="rules">
      <el-form-item
        :label="form[key].label"
        :prop="key+'.value'"
        v-for="(value,key) in form"
        :key="key"
        v-if="value.type !=='chore'">
        <el-input
          v-if="value.type === 'input'"
          class="line-input"
          v-model="value.value"
          :maxlength="value.maxlength"
          :placeholder="value.placeholder" />
        <el-select
          v-if="value.type==='select'"
          v-model="value.value"
          :placeholder="value.placeholder">
          <el-option
            v-for="item in value.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <slot :form="form" name="expand"></slot>

    </el-form>
    <div class="operation">
      <el-button type="primary" @click="handleConfirm">{{confirmText}}</el-button>
      <el-button type="primary" plain @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Emit } from 'vue-property-decorator'

  @Component({
    components: {}
  })
  export default class User extends Vue {
    @Prop({
      default: '提示'
    }) title: string
    @Prop({
      default: '确认'
    }) confirmText: string
    @Prop({
      default: () => {}
    }) form
    @Prop({
      default: () => {}
    }) rules

    @Emit('confirm')
    confirm (form) {
      this.resetForm()
    }

    isShow: boolean = false
    postParams = {}

    toggleDialog (isShow: boolean) {
      this.isShow = isShow
    }

    openDialog (postParams) {
      this.postParams = postParams
      this.toggleDialog(true)
      this.$nextTick(() => {
        this.initForm(this.postParams)
      })
    }

    handleConfirm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirm({...this.postParams, ...this.flatForm(this.form)})
          this.toggleDialog(false)
        }
      })
    }

    handleCancel () {
      this.toggleDialog(false)
      this.resetForm()
    }

    flatForm (form) {
      let temp = {}
      for (let key in form) {
        if (form.hasOwnProperty(key)) {
          temp[key] = form[key].value
        }
      }
      return temp
    }

    resetForm () {
      this.$refs.form.resetFields()
    }

    initForm (baseTemp) {
      for (let key in this.form) {
        if (this.form.hasOwnProperty(key) && baseTemp.hasOwnProperty(key)) {
          this.form[key].value = baseTemp[key]
        }
      }
    }

    openCallback () {
    }
    closeCallback(){
      this.resetForm()
    }
  }
</script>

<style lang="less" scoped>
  .operation {
    display: flex;
    flex-direction: row-reverse;
    > * {
      margin-right: 30px;
    }
  }
</style>
